<template>
	<view>
		<u-toast ref="uToast" />
		<view class="message-content">{{ spouseMessage.messageContent ? spouseMessage.messageContent : 'ta今天什么都还没说！' }}
		</view>
		<view class="message-input">
			<textarea v-model="missData.messageContent" placeholder="想ta的一天" maxlength="200" height="30"
				cursor-spacing="40"></textarea>
		</view>
		<view class="send-btn">
			<navigator class="base_button look-all" url="/pages/message/index">查看全部</navigator>
			<button class="base_button" @click="sendMiss">想你</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				spouseMessage: {
					messageContent: '',
					userBase: {
						nickname: ''
					}
				},
				missData: {
					loveId: '',
					messageContent: '',
					messageType: 1,
					state: 1
				}
			}
		},
		computed: {
			...mapGetters(['getLoveStartId', 'getLoginUser', 'getSpouseMessage'])
		},
		onLoad(e) {
			//查询思念留言
			// this.$u.api
			// 	.queryMessageList({
			// 		loveId: this.getLoveStartId,
			// 		messageType: 1,
			// 		pageSize: 1,
			// 		todayMessage: true,
			// 		userId: this.getLoginUser.spouseId
			// 	})
			// 	.then(res => {
			// 		// console.info(res);
			// 		if (res.data.length != 0) {
			// 			this.spouseMessage = res.data[0];
			// 		}
			// 	});
			this.spouseMessage = this.getSpouseMessage;
		},
		methods: {
			sendMiss: function() {
				if (this.missData.messageContent.trim() === '') {
					this.$refs.uToast.show({
						title: '你想说啥?',
						type: 'warning'
					});
					return;
				}
				if (!this.$pig.user.isLogin()) {
					return;
				}
				this.missData.loveId = this.getLoveStartId;
				// console.info('发送思念信息!');
				//查询思念留言
				this.$u.api.saveMessage(this.missData).then(res => {
					this.$refs.uToast.show({
						title: '思念脑电波发送成功!',
						type: 'error '
					});
					//清空内容
					this.missData.messageContent = '';
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message-content {
		background-color: rgba($love-color, 0.1);
		color: $love-color;
		padding: $love-padding;
		margin: $love-view-margin $love-margin;
		border-radius: $love-border-radius;
	}

	.message-input {
		border-radius: $love-border-radius;
		margin: $love-view-margin $love-margin;
		padding: $love-padding;
		background-color: #f3f4f5;

		textarea {
			width: 100%;
			// min-height: 150rpx;
		}
	}

	.send-btn {
		display: flex;
		margin: 0 $love-margin;

		.look-all {
			width: 30%;
			background: #f3f4f5 !important;
			margin-right: $love-big-margin;
			color: black;
		}
	}
</style>